<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">   <!--禁止缩放   -->
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<title></title>
		<style>
			div{border: 1px solid;}
		</style>
	</head>
	<body>
	<div class="container-fluid">
		<!-- Stack the columns on mobile by making one full-width and the other half-width -->
		<div class="row">
		  <div class="col-xs-8 col-md-8">col-md-8</div>
		  <div class="col-xs-4 col-md-4">col-md-4</div>
		</div>
		
		<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
		<div class="row">
		  <div class="col-md-12">.col-md-12</div>
		</div>
		
		<!-- Columns are always 50% wide, on mobile and desktop -->
		<div class="row">
		  <div class="col-xs-6">.col-xs-6</div>
		  <div class="col-xs-6">.col-xs-6</div>
		</div>
		
		<br/>
		<br/>
		<br/>
		
			<div class="row">
			  <div class="col-sm-5 col-md-6 col-lg-3">.col-sm-5 .col-md-3</div>
			  <div class="col-sm-5 col-sm-offset-2 col-md-3 col-md-offset-3 col-lg-6 col-lg-offset-3">.col-sm-5 .col-sm-offset-2 .col-md-6 </div>
			</div>
			<div class="row">
			  <div class="col-sm-6 col-md-5 col-lg-3">.col-sm-6 .col-md-5 .col-lg-6</div>
			  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-3">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
			<!--col-md-offset-2 列偏移两位 col-lg-offset-3列偏移三位   -->
			</div>
			
			<br/>
			<br/>
			<br/>
			
			
			<div class="row">
			  <div class="col-md-5 col-md-push-7">.col-md-9 .col-md-push-3</div>
			  <div class="col-md-7 col-md-pull-5">.col-md-3 .col-md-pull-9</div>
			  <!--col-md-push-7（从左侧往右侧推7列）col-md-pull-5（往左侧拉5列）   -->
			</div>
			
			<br />
			<br/>
			方妮
			<p class="lead">听说这个可以突出重点，我就试试</p>
			<p>刚刚试过了，只不过是把字体变大了而已</p>
			<p>我现在试试mark<mark>我被mark了</mark></p>
			<p>我现在试试del<del>我被del了</del></p>
			<br />
			<s>我是无用文本</s>
			<br />
			<u>为文本添加下划线，使用u标签</u>
			<br />
			<strong>着重显示我的标签是strong</strong>
			<br />
			<em>我是斜体我的标签叫em</em>
			<br />
			<p class="text-left">我靠左</p>
			<p class="text-center">我居中</p>
			<p class="text-right">我靠右</p>
			<p class="text-justify">可以均匀的在中间分布 不懂</p>
			<p class="text-nowrap">无包装</p>
			
			<p class="text-lowercase">Lowercased textJJJ.我全部是小写</p>
			<p class="text-uppercase">Uppercased JJJtext.我全部是大写</p>
			<p class="text-capitalize">Capitalized JJJtext.我没有变化</p>
			
			<br />
			<abbr title="attribute">attr</abbr>
			<br />
			<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
			
			
			<br />
			<br />
			<div class="table-bordered">
				<address class="container-fluid">
				  <strong>地址</strong><br>
				  湖南省常德市鼎城区鼎欣嘉豪小区<br>
				  B栋1106<br>
				  <abbr title="Phone">电话:</abbr> 17601362254
				</address>
			</div>
			
			<div class="table-bordered">			
				<address  class="container-fluid">
				  <strong>邮箱</strong><br>
				  <a href="mailto:#">523558287@qq.com</a>
				</address>
			</div>
			
		<br/>
		<br />
		<blockquote>
		  <p>我被引用了，我的标签是blockquote</p>
		</blockquote>
		
		<br/>
		<br/>
		<blockquote>
		  <p>我被引用了，标签是blockquote</p>
		  <footer>我是说明小字 <cite title="Source Title">我是斜体小标题</cite></footer>
		</blockquote>
		
		<br/>
		<br/>
		<blockquote class="blockquote-reverse">
		    <p>我被引用了，标签是blockquote-reverse,我在右边</p>
		  <footer>我是说明小字 <cite title="Source Title">我是斜体小标题</cite></footer>
		</blockquote>
		
		
		<br />
		<ul>
		  <li>我是无序列表</li>
		  <li>我是无序列表</li>
		  <li>我是无序列表</li>
		  <li>我是无序列表</li>
		</ul>
		<ul class="list-unstyled">
		  <li>我是针对子元素li设置的去边距，我的标签是list-unstyled</li>
		  <li>我是针对子元素li设置的去边距，我的标签是list-unstyled</li>
		</ul>
		
		<ul class="list-inline">
		  <li>我是通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。</li>
		  <li>我是通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。</li>
		</ul>
		
		<ol>
		  <li>我是有序列表</li>
		  <li>我是有序列表</li>
		  <li>我是有序列表</li>
		  <li>我是有序列表</li>
		</ol>
		
		
		<dl>
		  <dt>我是粗体可做标题，我的标签是dt</dt>
		  <dd>我是细体可做描述，我的标签是dd，我是细体可做描述，我的标签是dd</dd>
		  <dd>我是细体可做描述，我的标签是dd</dd>
		</dl>
		
		
		<dl class="dl-horizontal">
		  <dt >我是粗体可做标题，我的标签是dt</dt>
		  <dd>我是细体可做描述，我的标签是dd，我在dl里加上dl-horizontal标签我就可以不折行跟在dt后面咯</dd>
		</dl>
		
		
		To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
		To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
		<br/>
		我是kbd我标记的东西可以变黑，比如说<kbd>Ctrl+Alt
		
			<br/>
		
		<samp>This text is meant to be treated as sample output from a computer program.</samp>
	</div>
	
	
	<br/>
	
	</body>
</html>
